<style lang="" scoped>
.list,.list1{
    width: 20%;
    display: inline-block;
    margin-bottom: 20px;
    box-sizing: border-box;
}
    .layout-content[data-v-5748d884]{
        background-color: blue !important;
    }
    .maxBox{
        background-color: #EBF3F6 ;
        overflow: hidden;
        height: 100%;
    }
    .titleBox{
        margin-right: 15px;
        text-align: center;
        height: 180px;
        background-color: #fff;
    }
    .list1 .titleBox{
        margin-right: 0px;
    }   
    .titleBox p{
        height: 60px;
        line-height: 60px;
       font-weight: bold;
        
    }
    .titleBox p span{
        color: #C1C1C1;
        display: inline-block;
    }
    .titleBox p i{
        display: inline-block;
    }
    .titleBox .showNum{
        height:120px;
        line-height: 80px;
        position: relative;
    }
    .showNum .numBox{
        font-size: 30px;
        
    }
    .titleBox .one{
        color: #67B73E;
    }
    .titleBox .two{
        color: #2C8AE4;
    }
    .titleBox .three{
        color: #DE3F21;
    }
    .titleBox .four{
        color: #ED9D2C;
    }
    .titleBox .five{
        color: #75B04D;
    }
    .showNum .keyong{
        position: absolute;
        bottom: 0;
        right: 0;
        height: 25px;
        line-height: 25px;
        width: 90px;
        background-color: #67BA2C;
        color: #FFF;
        /* border-radius: 50% 0% 0% 0%; */
        border-top-left-radius:50% 250%;
    }
    .preList{
        position: relative;
        height: 140px;
        line-height: 140px;
        padding: 0 20px;
        margin-right: 15px;
        box-sizing: border-box;
        margin-bottom: 15px;
    }
    .preList .total{
        font-size: 35px;
        color: #FFF;
    }
    .preList .yeji{
        position: absolute;
        right: 0;
        top:0;
        padding:0 20px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        border-bottom-left-radius: 15% 100%;
    }
    .preList.bgc1{
        background-color: #FE9900;
    }
    .preList.bgc1 .yeji{
        color: #FE9900;
        background-color: #FFEBCC;
    }
    .preList.bgc2{
        background-color: #18BE6A;
    }
    .preList.bgc2 .yeji{
        color: #18BE6A;
        background-color: #D1F2E1;
    }
    .preList.bgc3{
        background-color: #EC3F14;
        margin-right: 0px;
    }
    .preList.bgc3 .yeji{
        color: #EC3F14;
        background-color: #FBD9D0;
    }
    .views-title[data-v-135e40b8]{
        margin-bottom: 0;
    }

    
    .fun{

    }
    .funLeft{
        background-color: #FFF;
        overflow: hidden;
        margin-right: 15px;
    }
    
    .funHead{
        padding: 10px 5px;
        margin: 0 15px;
        overflow: hidden;
        border-bottom: 1px solid #EEE;
        
    }
    .funHead h2{
        color: #497BE2;
        height: 30px;
    }
    .funHead i{
        cursor: pointer;
        float:right;
    }
    .funLeft .funBody{
        padding: 0 10px;
        
        padding-bottom: 20px;
        overflow: hidden;
    }
    .funBody i{
        font-size: 120px;
    }
    .funBody .bd{
        height: 150px;
        padding-top: 20px;
        text-align: center;
        vertical-align: middle;
    }
    .funBody .bd img{
        width: 50%;

    }
    .funBody .bd div{
        height:30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: bold;
    }
    .funRight{
        background-color: #FFF;
        overflow: hidden;
    }
    .funRight .funHead h2{
        color: #5A5A5A;
        font-size: 18px;
        font-weight: 500;
    }
    .funHead i.iconfont{
        font-size: 14px;
        border: 1px solid #EEEEEE;
        padding: 3px 6px 0px;
        color: #9E9E9D;
        border-radius:2px;
    }
    .funRight .funBody{
        padding:0 15px;padding-bottom: 68px;
    }
    .funRight .funBody p{
        line-height: 30px;
        padding: 15px 10px;
        letter-spacing:1px ;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box; 
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
        border-bottom: 1px dotted #E4E4E4;
    }
    .maxBox #modal .ivu-modal-footer{
        display: none !important;
    }
    .fenlei{
        position: relative;
        text-align: center;
        overflow: hidden;
        height: 35px;
        margin-bottom: 10px;
        
    }
    .fenlei h1{
        color: #DF8935;
        display: inline-block;
        position: absolute;
        left: 45%;
        background-color: #fff;
        padding: 0 20px;
        z-index: 50;
    }
    /* .fenlei h1 div{
        padding: 0 20px;
        display: inline-block;
    } */
    .fenlei .xian{
        border-bottom: 1px dotted #E9EAEC;
        position: absolute;
        width: 100%;
        top: 50%;
    }
    .con_class{
        /* width: 90%; */
        height: 185px;
        border: 1px solid #E0E0E0;
        padding-top: 30px;
        margin: 0 auto;
        border-radius: 5px;
        position: relative;
    }
    .con_class .check{
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 50px;
        border-radius: 0 0 5px 0;
        border-top-left-radius: 70% 180%;
        background-color: #47CB8A;
        overflow: hidden;
        height: 25px;
        line-height: 30px;
    }
    .con_class.active{
        border-color:#46CB89;
    }
    .con_class_box{
        overflow: hidden;
        text-align: center;
    }
    .con_class img{
        width: 65%;
    }
    .con_class div{
        height:30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: bold;
    }
    .con_class .iconfont{
        color: #fff;
        font-size: 22px;
    }
    .why{
        max-height:520px;
        padding-bottom: 10px;
        overflow-y: auto;
    }
    
</style>
<style>

</style>

<template>
<div class="maxBox">
        <Row>
            <div class="list">
                <div class="titleBox">
                    <p><i class="iconfont one" >&#xe60a;</i>&nbsp;&nbsp;使用账号数&nbsp;&nbsp;<span>(单位：个)</span></p>
                    <div class="showNum">
                        <div class="numBox one">
                                456789
                        </div>
                        <div class="keyong">
                            10个可用
                        </div>
                    </div>
                </div>
            </div><div class="list">
                <div class="titleBox">
                    <p><i class="iconfont two" >&#xe65f;</i>&nbsp;&nbsp;客户数&nbsp;&nbsp;<span>(单位：个)</span></p>
                    <div class="showNum">
                        <div class="numBox two">
                                456789
                        </div>
                        <div class="keyong">
                            10个可用
                        </div>
                    </div>
                </div>
                
            </div><div class="list">
                <div class="titleBox">
                    <p><i class="iconfont three" >&#xe60a;</i>&nbsp;&nbsp;员工数&nbsp;&nbsp;<span>(单位：个)</span></p>
                    <div class="showNum">
                        <div class="numBox three">
                                456789
                        </div>
                        <div class="keyong">
                            10个可用
                        </div>
                    </div>
                </div>
                
            </div><div class="list">
                <div class="titleBox">
                    <p><i class="iconfont four">&#xe668;</i>&nbsp;当年新增客户数&nbsp;<span>(单位：个)</span></p>
                    <div class="showNum four">
                        <div class="numBox">
                                456789
                        </div>
                        <div class="keyong">
                            10个可用
                        </div>
                    </div>
                </div>
                
            </div><div class="list1">
                <div class="titleBox">
                    <p><i class="iconfont five">&#xe6ae;</i>&nbsp;&nbsp;总保单数&nbsp;&nbsp;<span>(单位：个)</span></p>
                    <div class="showNum five">
                        <div class="numBox">
                                456789
                        </div>
                        <div class="keyong">
                            10个可用
                        </div>
                    </div>
                </div>
                
            </div>
        </Row>
        <Row>
           <i-col :md="8" :lg="8">
               <div class="preList bgc1">
                   <div class="total">
                        123456789
                    </div>
                    <div class="yeji">
                        <i class="iconfont">&#xe605;</i>&nbsp;&nbsp;当年保费
                    </div>
               </div>
           </i-col>
           <i-col :md="8" :lg="8">
               <div class="preList bgc2">
                   <div class="total">
                        123456789
                    </div>
                    <div class="yeji">
                        <i class="iconfont">&#xe605;</i>&nbsp;&nbsp;总保费
                    </div>
               </div>
           </i-col>
           <i-col :md="8" :lg="8">
               <div class="preList bgc3">
                   <div class="total">
                        123456789
                    </div>
                    <div class="yeji">
                        <i class="iconfont">&#xe605;</i>&nbsp;&nbsp;当年指标完成情况（剩余）
                    </div>
               </div>
           </i-col>
        </Row>
        <i-row >
            <i-col :md="16" :lg="16">
                <div class="funLeft">
                    <product-title></product-title>  
                    <div class="funHead">
                        <i-col span="12">
                            <h2>快捷方式</h2>
                        </i-col>
                        <i-col span="12" >
                            <i class="iconfont" @click="modalTrue">&#xe64b;</i>
                        </i-col>
                    </div> 
                    <div class="funBody">
                        <i-col :md="3" :lg="4" class="bd">
                            <img src="../../../static/indexImg/保单导入.png" alt="">
                            <div>保单录入</div>
                        </i-col>
                        <i-col :md="3" :lg="4" class="bd">
                            <img src="../../../static/indexImg/保单查询.png" alt="">
                            <div>保单录入</div>
                        </i-col>
                        <i-col :md="3" :lg="4" class="bd">
                            <img src="../../../static/indexImg/新增供应商.png" alt="">
                            <div>保单录入</div>
                        </i-col>
                        <i-col :md="3" :lg="4" class="bd">
                            <img src="../../../static/indexImg/保单导入.png" alt="">
                            <div>保单录入</div>
                        </i-col>
                        <i-col :md="3" :lg="4" class="bd">
                            <img src="../../../static/indexImg/保单导入.png" alt="">
                            <div>保单录入</div>
                        </i-col>
                        <i-col :md="3" :lg="4" class="bd">
                            <img src="../../../static/indexImg/保单导入.png" alt="">
                            <div>保单录入</div>
                        </i-col>
                        <i-col :md="3" :lg="4" class="bd">
                            <img src="../../../static/indexImg/保单导入.png" alt="">
                            <div>保单录入</div>
                        </i-col>
                        <i-col :md="3" :lg="4" class="bd">
                            <img src="../../../static/indexImg/保单导入.png" alt="">
                            <div>保单录入</div>
                        </i-col>
                        <i-col :md="3" :lg="4" class="bd">
                            <img src="../../../static/indexImg/保单导入.png" alt="">
                            <div>保单录入</div>
                        </i-col>
                    </div>
                </div>
                
            </i-col>
            <i-col :md="8" :lg="8">
                <div class="funRight">
                    <product-title></product-title> 
                    <div class="funHead">
                        <i-col span="12">
                            <h2>公告</h2>
                        </i-col>
                        <i-col span="12">
                            <Icon type="android-more-horizontal"></Icon>
                        </i-col>
                    </div>
                    <div class="funBody">
                        <p>ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试</p>
                        <p>ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试</p>
                        <p>ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试ceshi1小测试</p>
                    </div>
                </div>
            </i-col>
        </i-row>
        <Modal
        v-model="modal"
        :mask-closable="false"
        title="快捷方式"
        id="indexModal"
        :width="1000"
        :closable="false"
        >
        <div class="why">
            <div>
                <div class="fenlei">
                    <h1>
                        <div>录入类</div>
                    </h1>
                    <div class="xian"></div>
                </div>
                <div class="con_class_box">
                    <i-col span="4">
                        <div style="padding:0 5%;">
                            <div class="con_class active">
                                <img src="../../../static/indexImg/保单导入.png" alt="">
                                <div>保单录入</div>
                                <div class="check"><i class="iconfont">&#xe646;</i></div>
                            </div>
                        </div>
                    </i-col>
                    <i-col span="4">
                        <div style="padding:0 5%;">
                            <div class="con_class active">
                                <img src="../../../static/indexImg/保单导入.png" alt="">
                                <div>保单录入</div>
                                <div class="check"><i class="iconfont">&#xe646;</i></div>
                            </div>
                        </div>
                    </i-col>
                    <i-col span="4">
                        <div style="padding:0 5%;">
                            <div class="con_class active">
                                <img src="../../../static/indexImg/保单导入.png" alt="">
                                <div>保单录入</div>
                                <div class="check"><i class="iconfont">&#xe646;</i></div>
                            </div>
                        </div>
                    </i-col>
                    <i-col span="4">
                        <div style="padding:0 5%;">
                            <div class="con_class active">
                                <img src="../../../static/indexImg/保单导入.png" alt="">
                                <div>保单录入</div>
                                <div class="check"><i class="iconfont">&#xe646;</i></div>
                            </div>
                        </div>
                    </i-col>
                    <i-col span="4">
                        <div style="padding:0 5%;">
                            <div class="con_class active">
                                <img src="../../../static/indexImg/保单导入.png" alt="">
                                <div>保单录入</div>
                                <div class="check"><i class="iconfont">&#xe646;</i></div>
                            </div>
                        </div>
                    </i-col>
                    <i-col span="4">
                        <div style="padding:0 5%;">
                            <div class="con_class active">
                                <img src="../../../static/indexImg/保单导入.png" alt="">
                                <div>保单录入</div>
                                <div class="check"><i class="iconfont">&#xe646;</i></div>
                            </div>
                        </div>
                    </i-col>
                </div>
            </div>
        </div>
        </Modal>
</div>
    
</template>


<script>
import productTitle from '../../components/productTitle'
    export default {
        data() {
            return {
                modal:false,
            }
        },
        components:{
            productTitle
        },
        methods:{
            modalTrue(){
                this.modal=true;
            }
        }
    }
</script>
